<div class="modal" ng-controller="FlowableCollectionPopupCtrl">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true" ng-click="close()">&times;</button>
                <h2 translate>PROPERTY.COLLECTION</h2>
            </div>
            <div class="modal-body">
                <div class="detail-group clearfix">
                    <div class="form-group clearfix">
                        <div class="col-xs-12">
                          <div class="col-xs-4">
                            <label>{{ 'PROPERTY.COLLECTION.NAME' | translate }}</label>
                          </div>
                          <div class="col-xs-8">
                            <input ng-model="popup.collection" type="text" style="width:100%;height: 34px;">
                          </div>
                        </div>
                    </div>
                   
                    <div class="form-group clearfix">
                        <div class="col-xs-12">
                            <div class="col-xs-4">
                                <label>{{ 'PROPERTY.COLLECTION.SELECTED' | translate }}</label>
                            </div>
                            <div class="col-xs-8 clearfix">
                                <ul
                                class="simple-list"
                                ng-show="popupCollectionValue.length"
                                >
                                <li ng-repeat="user in popupCollectionValue">
                                    <i class="icon icon-user"></i>
                                    <span user-name="user"></span>
                
                                    <div class="actions">
                                    <a ng-click="removeUser(user)"><i class="icon icon-remove"></i></a>
                                    </div>
                                </li>                              
                                </ul>
                                <div
                                class="no-results"
                                ng-if="!popupCollectionValue.length"
                                >
                                {{ 'PROPERTY.COLLECTION.NO-SELECTED' | translate }}
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="form-group clearfix">
                    <div class="col-xs-12">
                      <div class="col-xs-4">
                        <label>{{ 'PROPERTY.ASSIGNMENT.SEARCH' | translate }}</label>
                      </div>
                      <div class="col-xs-8">
                        <input
                          class="form-control"
                          type="text"
                          id="people-select-input"
                          placeholder="{{ 'PROPERTY.ASSIGNMENT.PLACEHOLDER-SEARCHUSER' | translate }}"
                          auto-focus
                          custom-keys
                          up-pressed="previousUser()"
                          down-pressed="nextUser()"
                          enter-pressed="confirmUser()"
                          delayed-model="popup.filter"
                          delay="200"
                        />
                      </div>
                    </div>
                    <div class="col-xs-12">
                      <div class="col-xs-4">
                        <label></label>
                      </div>
                      <div class="col-xs-8">
                        <div class="subtle" style="margin: 2px 0 2px 0">
                          <span translate="PROPERTY.ASSIGNMENT.MATCHING"></span>
                        </div>
                      </div>
                    </div>
                    <div class="col-xs-12">
                      <div class="col-xs-4">
                        <label></label>
                      </div>
                      <div class="col-xs-8">
                        <div class="inline-people-select">
                          <ul class="simple-list">
                            <li
                              ng-click="confirmUser(user)"
                              ng-repeat="user in popup.userResults"
                              ng-class="{'active': $index == popup.selectedIndex}"
                            >
                              <div user-picture="user" user-index="$index" user-name="user"></div>
                            </li>
                          </ul>
                          <div
                            class="nothing-to-see"
                            translate="GENERAL.MESSAGE.PEOPLE-NO-MATCHING-RESULTS"
                            ng-show="popup.userResults.length == 0"
                          ></div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
            </div>
            <div class="modal-footer">
                <button ng-click="close()" class="btn btn-primary" translate>ACTION.CANCEL</button>
                <button ng-click="save()" class="btn btn-primary" translate>ACTION.SAVE</button>
            </div>
        </div>
    </div>
</div>